<template>
  <div>
    <Row>
      <Row class="funcContainer">
        <Col span="8">
          <Input
            search
            clearable enter-button
            size="large"
            placeholder="搜索服务"
            v-model="name"
            @on-search="queryService"
            @on-clear="clearSearch"
          />
        </Col>
        <Col span="4" offset="12">
          <div class="btnContainer">
            <Button type="primary" size='large' class="btn" @click="deleteServices"
              ><Icon type="ios-trash-outline" />&nbsp;删除</Button
            >
            <Button type="primary" size='large' class="btn" @click="registService"
              ><Icon type="md-add" />&nbsp;注册服务</Button
            >
          </div>
        </Col>
      </Row>
      <Col span="24" class="tableContainer">
        <Loading v-if="isLoading"></Loading>
        <Table
          :columns="columns"
          :data="serviceList"
          border
          @on-selection-change="selectionChange"
          v-if="!isLoading"
        >
          <template slot-scope="{ row }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 10px"
              @click="viewService(row)"
              >查看</Button
            >
            <Button type="error" size="small" @click="deleteService(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div class="pageContainer" v-if="!isLoading">
          <Page
            :total="serviceListTotal"
            show-elevator
            show-total
            @on-change="pageParams"
            :disabled="isPageDisabled"
          ></Page>
        </div>
      </Col>
    </Row>
    <div class="filter" v-if="isModalShow || isRegist"></div>
    <UpdateService
      v-if="isModalShow"
      :title="'查看服务'"
      :hasButton="true"
      :serviceForm="serviceForm"
      @operState="changeState"
    ></UpdateService>
    <UpdateService
      v-if="isRegist"
      :title="'注册服务'"
      :hasButton="false"
      :serviceForm="serviceForm"
      @operState="changeState"
    ></UpdateService>
  </div>
</template>
<style scoped>
.funcContainer {
  width: 100%;
}
.btnContainer {
  display: flex;
  justify-content: space-around;
}
.btn {
  margin: 0 1rem;
  background: rgb(0, 63, 84) !important;
  color: rgb(255, 255, 255, 0.8);
}
.tableContainer {
  margin-top: 30px;
}
.pageContainer {
  text-align: center;
  margin-top: 50px;
}
#modalContainer {
  padding: 30px;
}
.checkboxItem {
  display: block;
  text-align: left;
}
.checkboxContainer {
  padding: 30px;
}
.checkboxTitle {
  line-height: 55px;
  font-size: larger;
  font-weight: bold;
}
.filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(102, 102, 102, 1);
  opacity: 0.3566;
  z-index: 998;
}
</style>
<script>
import UpdateService from "../components/serviceAuth/updateService";
import Loading from "../components/Other/Loading";
export default {
  name: "ServiceManage",
  components: {
    UpdateService,
    Loading,
  },
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "服务类型",
          key: "type",
        },
        {
          title: "注册日期",
          key: "publishDate",
        },
        {
          title: "操作",
          slot: "action",
          width: 160,
          align: "center",
        },
      ],
      page: 1,
      size: 10,
      serviceList: [],
      serviceListTotal: 0,
      name: "",
      isPageDisabled: false,
      selections: [],
      registInfo: {},
      isModalShow: false,
      modalTitle: "",
      serviceForm: {},
      isRegist: false,
      isEdit: false,
      isLoading: true,
    };
  },
  methods: {
    queryServiceList() {
      this.axios
        .get("/service", {
          params: {
            page: this.page,
            size: this.size,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.serviceList = res.data.data;
            this.serviceListTotal = res.data.total;
            this.isLoading = false;
          } else {
            this.$Message.info("当前没有服务！");
            this.isLoading = false;
          }
        });
    },
    queryService() {
      this.axios
        .get("/service", { params: { name: this.name, page: 1, size: 10 } })
        .then((res) => {
          if (res.data.code === 200) {
            this.serviceList = res.data.data;
            this.serviceListTotal = res.data.total;
          } else {
            this.$Message.info("未找到指定服务！");
          }
        });
      this.isPageDisabled = true;
    },
    clearSearch() {
      this.queryServiceList();
      this.isPageDisabled = false;
    },
    pageParams(page) {
      this.page = page;
      this.queryServiceList();
    },
    viewService(row) {
      this.axios.get("/service/" + row.id).then((res) => {
        if (res.data.code === 200) {
          this.serviceForm = res.data.data;
          this.isModalShow = true;
          this.isRegist = false;
          this.isEdit = false;
          this.modalTitle = "查看服务";
        } else {
          this.$Message.info("服务信息有误！");
        }
      });
    },
    deleteService(row) {
      this.axios
        .delete("/service", {
          data: {
            serviceIds: [row.id],
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.queryServiceList();
          } else {
            this.$Message.info("无法删除服务！");
          }
        });
    },
    selectionChange(selections) {
      this.selections = selections.map((selection) => {
        return selection.id;
      });
    },
    deleteServices() {
      this.axios
        .delete("/service", {
          data: {
            serviceIds: this.selections,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.queryServiceList();
          } else {
            this.$Message.info("无法删除服务！");
          }
        });
    },
    registService() {
      this.isRegist = true;
      this.serviceForm = {
        title: "",
        keywords: [],
        type: "",
        themeClass: "",
        coordinate: "",
        projection: "",
        lastUpdateDate: "",
        updateCycle: "",
        extentInfo: {
          topLeftLon: "",
          topLeftLat: "",
          bottomRightLon: "",
          bottomRightLat: "",
        },
        publishDate: "",
        publishInfo: {
          organization: "",
          address: "",
          website: "",
        },
        contactInfo: {
          person: "",
          phone: "",
          mail: "",
        },
        url: "",
        thumb: "",
        desc: "",
      };
    },
    changeState(data) {
      this.isModalShow = false;
      this.isRegist = false;
      this.queryServiceList();
    },
  },
  mounted() {
    this.queryServiceList();
  },
};
</script>
